<template>
  <div class="cart">
    <topBar></topBar>
    <el-row>
      <el-col :span="16" :offset="4">
        <el-card class="box-card">
          <p style="font-size:24px;margin: 0 0 15px">购物车</p>
          <div v-if="isFlag===0" style="text-align: center">
            <el-image :src="src"></el-image>
            <p style="font-family:'黑体';font-size:20px">购物车为空!</p>
          </div>
          <div v-else>
            <el-table
              :data="tableData"
              border
              height="400"
              stripe
              @row-dblclick="showDetailInfo"
              style="width: 100%">
              <el-table-column
                type="index"
                label="序号"
                width="50">
              </el-table-column>
              <el-table-column label="图片" width="80">
                <template slot-scope="scope">
                  <el-image
                    style="width: 50px; height: 50px"
                    :src="scope.row.commodity.imgUrl"
                    fit="scale-down"></el-image>
                </template>
              </el-table-column>
              <el-table-column
                prop="commodity.cname"
                label="商品名称"
                width="180">
              </el-table-column>
              <el-table-column
                prop="commodity.model"
                label="型号">
              </el-table-column>
              <el-table-column label="数量" width="155">
                <template slot-scope="scope">
                  <el-input-number v-model="scope.row.count" size="mini" :step="1" step-strictly
                                   :min="1" @change="updateCount"></el-input-number>
                </template>
              </el-table-column>

              <el-table-column label="单价">
                <template slot-scope="scope">
                  ￥ {{scope.row.commodity.price}}
                </template>
              </el-table-column>
              <el-table-column label="总计">
                <template slot-scope="scope">
                  ￥ {{scope.row.total=scope.row.count * scope.row.commodity.price}}
                </template>
              </el-table-column>
              <el-table-column label="操作">
                <template slot-scope="scope">
                  <el-button
                    type="text"
                    size="mini"
                    @click="handleView(scope.$index, scope.row)">移除
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
            <div class="cart-settle">
              <div style="margin-bottom: 5px">
                共计：￥ {{totalMoney}}
              </div>
              <el-button type="success" @click="settlementFun">结算</el-button>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>
<script>
  import topBar from '~/components/topBar.vue'
  import * as CartRequest from "../../assets/cart/cart";
  export default {
    components: {
      topBar
    },
    data() {
      return {
        isFlag: 0,
        tableData: [],
        totalMoney: 0,
        src: 'http://theme.opencartdemo.cn/smart-3200-free/catalog/view/theme/default/image/no_items.png'
      };
    },
    methods: {
      showDetailInfo(row, col) {
        this.$router.push({
          path: '/category/detail',
          query: {category: row.commodity.id}
        })
      },
      handleView(index, row) {
        console.log(index, row)
        CartRequest.deleteCartInfo(this,row.id);
        
      },
      settlementFun(){
        this.$router.push('/settlement/settlement')
      },
      updateCount() {
        let total = 0;
        this.tableData.forEach((item) => {   
          total +=  item.count*item.commodity.price
        })
        this.totalMoney = total;
      },
    },
    async mounted() {
      //表格中的total提前计算好
      await CartRequest.getCartInfoDetail(this);
    }
  };
</script>

<style lang="less">
  .cart {
    margin-bottom: 30px;

    .box-card {
      border-radius: 12px;

      .cart-settle {
        margin-bottom: 20px;
        margin-top: 10px;
        float: right;
        text-align: right;
      }
    }
  }
</style>
